<template>
  <div class="profile">
    <h1>个人资料</h1>
    <div class="user-info">
      <p>用户名: {{ user.username }}</p>
    </div>
    <div class="favorites">
      <h2>已收藏餐厅</h2>
      <div class="favorite-cards">
        <el-card v-for="fav in user.favorites" :key="fav.id" class="favorite-card">
          <template v-slot:header>
<div  class="clearfix">
            <img :src="fav.image" class="card-image" />
          </div>
</template>
          <div class="card-content">
            <h4>{{ fav.name }}</h4>
          </div>
        </el-card>
      </div>
    </div>
    <div class="history">
      <h2>历史操作记录</h2>
      <el-timeline>
        <el-timeline-item v-for="(action, index) in user.history" :key="index" :timestamp="action.date">
          <el-card>
            <h4>{{ action.type }}: {{ action.item.name }}</h4>
            <p v-if="action.type === '评论'">评论内容: {{ action.comment }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserProfilePage',
  data() {
    return {
      user: {
        username: '杨思雨',
        favorites: [
          { id: 6, name: '幸福小馆', image: '/images/6.png' },
          { id: 4, name: '特色炒菜', image: '/images/4.png' },
          { id: 3, name: '兰州拉面', image: '/images/2.png' }
        ],
        history: [
          { type: '评论', item: { id: 6, name: '幸福小馆' }, date: '2024-11-01', comment: '非常好吃，服务态度也很好！' },
          { type: '收藏', item: { id: 3, name: '兰州拉面' }, date: '2024-11-02' },
          { type: '评论', item: { id: 4, name: '特色炒菜' }, date: '2024-11-03', comment: '环境不错，菜品味道也可以。' }
        ]
      }
    };
  },
  methods: {
    goToRestaurant(id) {
      this.$router.push(`/restaurant/${id}`);
    }
  }
};
</script>

<style scoped>
.profile {
  text-align: center;
  padding: 20px;
}

.profile h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.user-info {
  margin-bottom: 20px;
}

.favorites {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.favorite-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.favorite-card {
  width: 300px;
  text-align: center;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 10px;
}

.history {
  margin-top: 20px;
}

.history h2 {
  margin-bottom: 10px;
}

.el-timeline {
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
}

.el-card {
  text-align: left;
  padding: 10px;
}
</style>